<template>
  <div class="border" style="margin:0 auto">
    <div class="content_box"  >
       <div class="title">
    <h2>2020年实验室仪器设备借用</h2>
  </div>
      <el-form
      :model="equipmentInfo"
      :rules="ruless"
      ref="equipmentInfo"
      label-width="130px">
      <el-form-item  label="借用部门：" prop="borrow_department" style="padding-left:50px">
        <el-input v-model="equipmentInfo.borrow_department" style="width:85%;margin:0 auto;">
        </el-input>
      </el-form-item>
      <el-form-item label="设备借用用途：" prop="borrow_application" style="padding-left:50px">
        <el-input v-model="equipmentInfo.borrow_application" style="width:85%;margin:0 auto;">
        </el-input>
      </el-form-item>
      <el-form-item label="申请借用时间：" prop="destine_start_time" style="padding-left:50px">
        <el-input v-model="equipmentInfo.destine_start_time" style="width:85%;margin:0 auto;">
        </el-input>
      </el-form-item>
      <el-form-item label="借用归还时间：" prop="destine_end_time" style="padding-left:50px">
        <el-input v-model="equipmentInfo.destine_end_time" style="width:85%;margin:0 auto;">
        </el-input>
      </el-form-item>
      <el-form-item label="借用人：" prop="borrower_name" style="padding-left:50px">
        <el-input v-model="equipmentInfo.borrower_name" style="width:85%;margin:0 auto;">
        </el-input>
      </el-form-item>
      <el-form-item label="电话号码：" prop="borrower_phone" style="padding-left:50px">
        <el-input v-model="equipmentInfo.borrower_phone" style="width:85%;margin:0 auto;">
        </el-input>
      </el-form-item>
       <el-button style="display:block;margin:0 auto" 
       type="primary" 
       @click="submitForm('equipmentInfo');submitsuccess()">
         提 交 信 息
        </el-button>
      </el-form>
    </div>

    <el-dialog 
    title="设备借用清单" 
    :visible.sync="outerVisible" 
    style="text-align:center">
      <el-button type="primary" 
      size="mini" round 
      style="float:right;margin:0 auto" 
      @click="innerVisible = true">添 加</el-button>

    <el-dialog 
      title="信息填写" 
      :visible.sync="innerVisibleAdd" 
      style="text-align:center" 
      append-to-body>
      <el-form label-width="100px" 
      :model="equipmentadd"
      ref="equipmentaddRef"
      :rules="rulesadd">
        <el-form-item label="设备名称： " prop="equipment_name">
          <el-input v-model="equipmentadd.equipment_name" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
        <el-form-item label="型号： " prop="model">
          <el-input v-model="equipmentadd.model" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
        <el-form-item label="数量： " prop="number">
          <el-input v-model="equipmentadd.number" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
        <el-form-item label="附件： " prop="annex">
          <el-input v-model="equipmentadd.annex" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
      </el-form>
       <!-- ;submitForm('equipmentadd')"  -->
      <el-button @click="updateequipment()" 
      type="primary" style="display:block;margin:0 auto">确 认</el-button>
      </el-dialog>

      <el-dialog 
      title="信息填写" 
      :visible.sync="innerVisible" 
      style="text-align:center" 
      append-to-body>
      <el-form label-width="100px" 
      :model="equipmentadd"
      ref="equipmentaddRef"
      :rules="rulesadd">
        <el-form-item label="设备名称： " prop="equipment_name">
          <el-input v-model="equipmentadd.equipment_name" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
        <el-form-item label="型号： " prop="model">
          <el-input v-model="equipmentadd.model" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
        <el-form-item label="数量： " prop="number">
          <el-input v-model="equipmentadd.number" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
        <el-form-item label="附件： " prop="annex">
          <el-input v-model="equipmentadd.annex" style="width:100%;margin:0 auto">
          </el-input>
        </el-form-item>
      </el-form>
       <!-- ;submitForm('equipmentadd')"  -->
      <el-button @click="addsuccess()" 
      type="primary" style="display:block;margin:0 auto">确 认</el-button>
      </el-dialog>

      <div slot="footer" class="dialog-footer">
      </div>

        <el-table :data="addForm" ref="addForm">
        <el-table-column prop="equipment_name" label="设备名称"  disabled>
        </el-table-column>
        <el-table-column label="型号" prop="model"  disabled>
        </el-table-column>
        <el-table-column prop="number" label="数量"  disabled></el-table-column>
        <el-table-column prop="annex" label="附件"  disabled>
        </el-table-column>
        <el-table-column label="操作" width="160px">
      <template slot-scope="{}">
        
        <el-button
          size="mini"
          @click="innerVisibleAdd = true">修 改</el-button>
        <el-button
          size="mini"
          type="danger"
           @click="delData()">删 除</el-button>
          <!-- @click="delData(scope.row)">删 除</el-button> -->
      </template>
    </el-table-column>
          </el-table>
          <br>
          <el-button 
          :plain="true" 
          @click="success()"
          type="primary" 
          style="display:block;margin:0 auto">提 交 申 请</el-button>
        </el-dialog>
      </div>  
</template>

<script>
export default {
    data() {
      return {
        table: false,
        tableLoading:false,
        outerVisible: false,
        dialogTableVisible: false,
        equipmentInfo:{
          borrow_department:"",
          borrow_application:"",
          destine_start_time:"",
          destine_end_time:"",
          borrower_name:"",
          borrower_phone:""
        },
        equipmentadd:{
          equipment_name:"",
          model:"",
          number:"",
          annex:""
        },
        addForm:[
        ],
        ruless:{
          borrow_department:[{required:true,message:"注意借用部门不能为空呐",trigger:"blur"}],
          borrow_application:[{required:true,message:"注意设备借用用途不能为空呐",trigger:"blur"}],
          destine_start_time:[{required:true,message:"注意申请借用时间不能为空呐",trigger:"blur"}],
          destine_end_time:[{required:true,message:"注意申请借用时间不能为空呐",trigger:"blur"}],
          borrower_name:[{required:true,message:"注意借用人不能为空呐",trigger:"blur"}],
          borrower_phone:[
          { required:true,message:"注意电话号码不能为空呐",trigger:"blur"}],
        },
        rulesadd:{
          equipment_name:[{required:true,message:"注意设备名称不能为空呐",trigger:"blur"}],
          model:[{required:true,message:"注意型号不能为空呐",trigger:"blur"}],
          number:[{required:true,message:"注意数量不能为空呐",trigger:"blur"}],
          annex:[{required:true,message:"注意附件不能为空呐",trigger:"blur"}],
        },
     innerVisible: false,
     innerVisibleAdd:false
      };
    },
    methods: {
        async submitsuccess(){
        // console.log(this.equipmentInfo)
        const {data: res}=await this.$http.post(
          '/api/student/equipmentborrow',this.equipmentInfo)
          console.log(res)
           sessionStorage.setItem('formid',res.data.form_id)
          const formid=sessionStorage.getItem('formid')
        const {data:re}=await this.$http.post(
          '/api/student/equipmentborrow',{formid:formid}
        )
        console.log(formid);
           sessionStorage.setItem('borrpwname',res.data.$res.borrower_name)
           const form_id=sessionStorage.getItem('formid')
           const applicant_name=sessionStorage.getItem('borrpwname')
          if(res.code==200){
            // console.log(res.data.form_id)
            // console.log(res.data.$res.borrower_name)
            this.$message.success("信息提交成功！请添加您需要借用的设备！")
          //  console.log(form_id)
          //  console.log(applicant_name)
            this.dialogVisible=false
        // console.log(form_id);
        // console.log(applicant_name);
        // const form_id=5555;
        const type_id=3;
        // console.log(type_id);
        const {data: re}=await this.$http.post(
          '/api/student/createform',{form_id:form_id,applicant_name:applicant_name,type_id:type_id}
          // form_id=this.form_id&applicant_name=this.applicant_name&type_id=this.type_id
        );
        // console.log(form_id)
        // console.log(applicant_name)
        // console.log(type_id)
        // console.log(re);
          }else if(re.code==100){
            this.$message.error("信息提交失败！请重新填写！")
          }
      },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.outerVisible=true
          //  console.log(this.equipmentadd)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async addsuccess(){
        console.log(this.equipmentadd.annex);
           const form_id=sessionStorage.getItem('formid')
        //   const equipment_name=sessionStorage.getItem('equipmentname');
        // const model=sessionStorage.getItem('model');
        //  const number=sessionStorage.getItem('number');
        //  const annex=sessionStorage.getItem('annex');
        //    console.log(model);
        const {data: re}=await this.$http.post(
          '/api/student/addequipment',{form_id:form_id,equipment_name:this.equipmentadd.equipment_name,model:this.equipmentadd.model,number:this.equipmentadd.number,annex:this.equipmentadd.annex})
        // const {data: re}=await this.$http.post(
        //   '/api/student/addequipment',this.equipmentadd)
          console.log(re)
          
          if(re.code==200){
            this.$message.success("设备添加成功！")
            this.innerVisible=false
            this.addForm.push(re.data)
          this.equipmentadd.equipment_name="",
          this.equipmentadd.model="",
          this.equipmentadd.number="",
          this.equipmentadd.annex=""
            console.log(this.addForm);
            console.log(re.data.equipment_name);
            console.log(re.data.equipment_id);
            sessionStorage.setItem('equipmentid',re.data.equipment_id)
            sessionStorage.setItem('equipmentname',re.data.equipment_name)
            sessionStorage.setItem('model',re.data.model)
            sessionStorage.setItem('number',re.data.number)
            sessionStorage.setItem('annex',re.data.annex)
            // console.log(typeof(this.equipmentadd));
          }else if(re.code==100){
            this.$message.error("设备添加失败！请重新添加！")
          }
      },
      async success(){
         const form_id=sessionStorage.getItem('formid');
        //  console.log(form_id);
          const {data:s}=await this.$http.post(
            '/api/student/addequipmentcheck',{
              form_id:form_id
            })
            // console.log(s);
            // console.log(form_id)
            if(s.code==200){
              this.$message.success("成功！")
              this.outerVisible=false
              this.$refs.equipmentadd.resetFields()
            }else if(s.code==100){
              this.$message.error("失败！")
            }
      },
         async updateequipment(){
        const equipment_id=sessionStorage.getItem('equipmentid');
        //  const equipment_name=sessionStorage.getItem('equipmentname');
        // const model=sessionStorage.getItem('model');
        //  const number=sessionStorage.getItem('number');
        //  const annex=sessionStorage.getItem('annex');
         const form_id=sessionStorage.getItem('formid');
         console.log(form_id);
        // console.log(equipment_name);
        const {data: res}=await this.$http.post(
          '/api/student/updateequipment',{equipment_id:equipment_id,equipment_name:this.equipmentadd.equipment_name,model:this.equipmentadd.model,number:this.equipmentadd.number,annex:this.equipmentadd.annex})
          console.log(res)
          if(res.code==200){
            this.$message.success("信息修改成功！")
            this.innerVisibleAdd=false
            this.equipmentadd=JSON.parse(JSON.parse(JSON.stringify(this.equipmentadd)))
            // const {data:re}=await this.$http.post(
            //   '/api/student/selectequipmentlist',{form_id:form_id}
            // )
            // console.log(re);
          }else if(res.code==100){
            this.$message.error("信息修改失败！请重新填写！")
          }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }, 
      handleEdit(index, row) {
        console.log(index, row);
      },
      async delData() {
      const equipment_id=sessionStorage.getItem('equipmentid');
        const {data: res}=await this.$http.post(
          '/api/student/deleteequipment',{equipment_id:equipment_id})
            console.log(res);
            if(res.code==200){
            this.$message.success("信息删除成功！")
            this.innerVisibleAdd=false
            // this.equipmentaddRef.splice(this.equipmentaddRef.indexOf(),1)
          }else if(res.code==100){
            this.$message.error("信息删除失败！请重新删除！")
          }
      },
      handleDelete(index, row) {
        console.log(index, row);
          },
        },
}
</script>

<style scoped>
.title {
  text-align: center;
  margin: 3%;
}
.border {
  width: 800px;
  height: 520px;
  border: 35px solid #BFBFBF;
  border-radius: 15px;
  margin: 0 auto;
}
</style>